<template>
  <div class="app-container">
    <div class="searchform">
      <el-form
        ref="search"
        :model="search"
        size="mini"
        label-width="90px"
      >
        <el-row :gutter="8">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="name" label="客户名称">
              <el-input
                v-model="search.name"
                placeholder="客户名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="telephone" label="电话">
              <el-input
                v-model="search.telephone"
                placeholder="电话"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clue_status" label="线索状态">
              <el-select v-model="search.clue_status" clearable placeholder="请选择">
                <el-option v-for="item in clueStatusOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clue_source" label="线索渠道">
              <el-select v-model="search.clue_source" clearable placeholder="请选择">
                <el-option v-for="item in clueSourceOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clue_type" label="线索类型">
              <el-select v-model="search.clue_type" clearable placeholder="请选择">
                <el-option v-for="item in clueTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="app_name" label="流量来源">
              <el-input
                v-model="search.app_name"
                placeholder="流量来源"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="flow_type" label="流量类型">
              <el-select v-model="search.flow_type" clearable placeholder="请选择">
                <el-option v-for="item in flowTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="action_type" label="互动类型">
              <el-select v-model="search.action_type" clearable placeholder="请选择">
                <el-option v-for="item in actionTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="province" label="省份">
              <el-select v-model="search.province" clearable placeholder="请选择" @change="changeProvince">
                <el-option v-for="item in provinceOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="city" label="市">

              <el-select v-model="search.city" clearable placeholder="请选择" >
                <el-option v-for="item in cityOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealer_name" label="经销商名称">
              <el-input
                v-model="search.dealer_name"
                placeholder="经销商名称"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="series_id" label="产品小类">
              <el-select v-model="search.series_id" :clearable="true" placeholder="请选择" >
                <el-option v-for="item in seriesIds" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item label="线索创建时间" prop="created_at" type="date">
              <el-date-picker
                v-model="search.created_at"
                :unlink-panels="true"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('search')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">列表</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button v-if="userInfo.whiteFlag === 10041001" :loading="exportLoading" type="primary" icon="el-icon-download" @click="recordExportData">导出</el-button>
            <el-button type="primary" icon="el-icon-s-comment" @click="showSmsDialog" >发送短信</el-button>
          </el-button-group>
        </div>
      </div>
      <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" min-width="50"/>
        <el-table-column type="selection" width="50"/>
        <el-table-column align="center" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-tooltip class="item" content="明细" placement="bottom">
              <el-button
                type="text"
                style="font-size: 20px;"
                icon="el-icon-document"
                @click="detail(scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="item" content="维护" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="editOpen(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="name" label="客户名称" min-width="150"/>
        <el-table-column v-if="userInfo.whiteFlag === 10041001" prop="telephone" label="电话" min-width="150"/>
        <el-table-column prop="gender" label="性别" min-width="150"/>
        <el-table-column prop="province_name" label="省份" min-width="150"/>
        <el-table-column prop="city_name" label="市" min-width="150"/>
        <el-table-column prop="clue_source" label="线索渠道" min-width="100">
          <template slot-scope="scope">
            <span>{{ sourceFormat('clue_source', scope.row.clue_source) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="clue_type" label="线索类型" min-width="100">
          <template slot-scope="scope">
            <span>{{ sourceFormat('clue_type', scope.row.clue_type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="app_name" label="流量来源" min-width="100"/>
        <el-table-column prop="flow_type" label="流量类型" min-width="100">
          <template slot-scope="scope">
            <span>{{ sourceFormat('flow_type', scope.row.flow_type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="action_type" label="互动类型" min-width="100">
          <template slot-scope="scope">
            <span>{{ sourceFormat('action_type', scope.row.action_type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealer_name" label="经销商" min-width="100"/>
        <el-table-column prop="series_name" label="产品小类" min-width="100"/>
        <el-table-column prop="clue_status" label="线索状态" min-width="100">
          <template slot-scope="scope">
            <span>{{ sourceFormat('clue_status', scope.row.clue_status) }}</span>
          </template>
        </el-table-column>
        <el-table-column :formatter="dateFormat" prop="CREATED_AT" label="线索创建时间" min-width="150" sortable/>
        <el-table-column :formatter="dateFormat" :sort-method="sortHandleTime" prop="handle_time" label="线索处理时间" min-width="150" sortable/>
        <el-table-column prop="handle_by" label="处理人" min-width="100"/>
      </BaseTable>
    </div>

    <edit v-if="dialogFormVisible4dealer" :row-data="rowData" :dialog-form-visible.sync="dialogFormVisible4dealer" @refreshEvent="refresh"/>

    <div v-if="showDetail">
      <detail
        :entity="rowData"
        :show-detail.sync="showDetail"
      />
    </div>
    <SmsDialog :edit-dialog.sync="smsDialog" :multiple-selection="multipleSelection" @smsClose="smsClose"/>
  </div>
</template>
<script>
import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import { queryPage4OutClue, queryOutClue4Export, findSeries } from '@/api/vehicle/custBiz.js'
import formMixins from '@/mixins/formMixins'
import { mapGetters } from 'vuex'
import { exportFile } from '@/utils'
import detail from './detail'
import moment from 'moment'
import edit from './edit.vue'
import SmsDialog from './smsDialog.vue'
// import _ from 'lodash'

export default {
  name: 'CustBizIndex',
  components: {
    BaseTable,
    rSelect,
    filtercode,
    detail,
    edit,
    SmsDialog,
    moment
  },

  mixins: [formMixins],
  data() {
    return {
      dialogFormVisible4dealer: false,
      exportLoading: false,
      showDetail: false,
      rowData: {},
      smsDialog: false,
      provinceOptions: [],
      cityOptions: [],
      search: {
        name: '',
        telephone: '',
        created_at: [],
        clue_status: '',
        clue_source: '',
        clue_type: '',
        app_name: '',
        flow_type: '',
        action_type: '',
        dealer_name: '',
        series_id: '',
        province: '',
        city: '',
        limit: 10,
        pageNum: 1
      },
      selectDealerInfo: {},
      clueStatusOptions: [{ 'value': '0', 'name': '新线索' }, { 'value': '1', 'name': '有意向' }, { 'value': '2', 'name': '无意向' }],
      clueSourceOptions: [{ 'value': '1', 'name': '字节-橙子建站' }, { 'value': '2', 'name': '其他渠道-外部导入' },
        { 'value': '5', 'name': '字节-抖音企业号' }, { 'value': '7', 'name': '字节-巨量线索' }, { 'value': '8', 'name': '字节-云店' },
        { 'value': '9', 'name': '字节-星图' }, { 'value': '10', 'name': '字节-获客宝' }, { 'value': '11', 'name': '字节-住小帮' }],
      clueTypeOptions: [{ 'value': '0', 'name': '字节-表单提交' }, { 'value': '1', 'name': '字节-在线咨询' }, { 'value': '2', 'name': '字节-智能电话' },
        { 'value': '3', 'name': '字节-网页回呼' }, { 'value': '4', 'name': '字节-卡券' }, { 'value': '5', 'name': '字节-抽奖' }],
      flowTypeOptions: [{ 'value': '1', 'name': '经营-自然流量线索' }, { 'value': '2', 'name': '经营-广告直接线索' }, { 'value': '3', 'name': '经营-广告间接线索' },
        { 'value': '4', 'name': '广告线索' }, { 'value': '5', 'name': '无' }],
      actionTypeOptions: [{ 'value': '0', 'name': '其他' }, { 'value': '1', 'name': '短视频' }, { 'value': '2', 'name': '直播' },
        { 'value': '3', 'name': '企业主页' }, { 'value': '4', 'name': '私信' }, { 'value': '5', 'name': '订阅文章' }],
      seriesIds: [],
      tableList: [],
      multipleSelection: []
    }
  },

  computed: {
    ...mapGetters(['dictMap', 'regionMap', 'userInfo'])
  },
  watch: {
    'search.province': function(val) {
      console.log(val)
      if (!val) {
        this.cityOptions = []
        this.search.city = ''
      }
    }
  },
  mounted() {
    this.searchHandle()
    this.searchSeries()
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
  },
  methods: {
    sortHandleTime(a, b) {
      let num1 = 0
      let num2 = 0
      if (a.handle_time) {
        num1 = Date.parse(a.handle_time).valueOf()
      }
      if (b.handle_time) {
        num2 = Date.parse(b.handle_time).valueOf()
      }
      return num1 - num2
    },
    refresh() {
      this.searchHandle()
    },
    detail(row) {
      console.log(row)
      const args = Object.assign({}, row)
      if (args.CREATED_AT) { args.CREATED_AT = moment(args.CREATED_AT).format('YYYY-MM-DD HH:mm:ss') }
      if (args.handle_time) { args.handle_time = moment(args.handle_time).format('YYYY-MM-DD HH:mm:ss') }
      this.rowData = args
      this.showDetail = true
    },
    colseDetail() {
      this.showDetail = false
    },
    searchHandle() {
      this.dialogVisible = false
      const table = this.$refs['table']
      // const search = _.extend(this.search)
      const args = Object.assign({}, this.search)

      if (args.created_at && args.created_at.length > 0) {
        args.created_at_start = args.created_at[0]
        args.created_at_end = args.created_at[1]
      } else {
        args.created_at_start = ''
        args.created_at_end = ''
      }

      queryPage4OutClue(args)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    editOpen(row) {
      console.log(row)
      const args = Object.assign({}, row)
      if (args.CREATED_AT) { args.CREATED_AT = moment(args.CREATED_AT).format('YYYY-MM-DD HH:mm:ss') }
      if (args.handle_time) { args.handle_time = moment(args.handle_time).format('YYYY-MM-DD HH:mm:ss') }
      this.rowData = args
      this.dialogFormVisible4dealer = true
      console.log(this.rowData)
    },
    // 导出
    recordExportData() {
      const args = Object.assign({}, this.search)
      if (args.created_at && args.created_at.length > 0) {
        args.created_at_start = args.created_at[0]
        args.created_at_end = args.created_at[1]
      } else {
        args.created_at_start = ''
        args.created_at_end = ''
      }
      this.exportLoading = true
      queryOutClue4Export(args)
        .then(res => {
          const option = {
            tHeader: ['客户名称', '电话', '性别', '省份', '市', '线索渠道', '线索类型', '流量来源', '流量类型', '互动类型', '经销商', '产品小类', '线索状态', '线索创建时间', '线索处理时间', '处理人'],
            filterVal: ['name', 'telephone', 'gender', 'province_name', 'city_name', 'clue_source', 'clue_type', 'app_name', 'flow_type', 'action_type', 'dealer_name', 'series_name', 'clue_status', 'CREATED_AT', 'handle_time', 'handle_by'],
            table: res,
            fileName: '外部线索查询导出'
          }
          exportFile(option, () => {
            this.exportLoading = false
          })
        })
        .catch(err => {})
    },
    // 查询车系
    searchSeries() {
      findSeries().then(res => {
        this.seriesIds = res
      }).catch(err => {
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    smsClose() {
      this.smsDialog = false
      this.searchHandle()
    },
    showSmsDialog() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择表格数据'
        })
      } else {
        this.smsDialog = true
      }
    },
    changeProvince() {
      const p = this.search.province

      console.log(this.regionMap[p])
      this.cityOptions = this.regionMap[p].children
      this.search.city = ''
    },
    sourceFormat(type, value) {
      let name = ''
      if (type == 'clue_source') {
        this.clueSourceOptions.forEach(item => {
          if (item.value == value) {
            name = item.name
          }
        })
      } else if (type == 'clue_type') {
        this.clueTypeOptions.forEach(item => {
          if (item.value == value) {
            name = item.name
          }
        })
      } else if (type == 'action_type') {
        this.actionTypeOptions.forEach(item => {
          if (item.value == value) {
            name = item.name
          }
        })
      } else if (type == 'flow_type') {
        this.flowTypeOptions.forEach(item => {
          if (item.value == value) {
            name = item.name
          }
        })
      } else if (type == 'clue_status') {
        this.clueStatusOptions.forEach(item => {
          if (item.value == value) {
            name = item.name
          }
        })
      }
      return name
    }
  }
}
</script>

<style scoped>

.content a {
    color: #409eff;
}
</style>
